<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!--
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
    -->
    <link rel="stylesheet" type="text/css" href="../css/bootstrap/easyui.css">

    <link rel="stylesheet" type="text/css" href="../css/icon.css">
    <link rel="stylesheet" type="text/css" href="../css/demo.css">

    <script type="application/javascript" src="../js/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.element.js"></script>
    <script type="text/javascript" src="../js/jquery.form.js"></script>
</head>
<body>
<!--
<table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"
       toolbar="#toolbar" pagination="true"
       rownumbers="true" fitColumns="true" singleSelect="true">
    <thead>
    <tr>
        <th field="firstname" width="50">First Name</th>
        <th field="lastname" width="50">Last Name</th>
        <th field="phone" width="50">Phone</th>
        <th field="email" width="50">Email</th>
    </tr>
    </thead>
</table>

<div id="toolbar">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New
        User</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit
        User</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove
        User</a>
</div>

-->
 <div style="width:600px">
    <table id="testTab"></table>
</div>
<div id="formDiv">
    <div id="addPanel">
        <div class="ftitle">User Information</div>
        <div>
            <div id="insertForm">

            </div>
            <div>


            </div>

        </div>
    </div>
    <form id="addForm" method="post">
    </form>
</div>

<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
     closed="true" buttons="#dlg-buttons">
    <div class="ftitle">User Information</div>
    <form id="fm" method="post" novalidate>
        <div class="fitem">
            <label>First Name:</label>
            <input name="firstname" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>Last Name:</label>
            <input name="lastname" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>Phone:</label>
            <input name="phone">
        </div>
        <div class="fitem">
            <label>Email:</label>
            <input name="email" class="easyui-validatebox" validType="email">
        </div>
    </form>
</div>
<div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel"
       onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
</div>

<script type="text/javascript">
var url;
function newUser() {
    $('#dlg').dialog('open').dialog('setTitle', 'New User');
    $('#fm').form('clear');
    url = 'save_user.php';
}
function editUser() {
    var row = $('#dg').datagrid('getSelected');
    if (row) {
        $('#dlg').dialog('open').dialog('setTitle', 'Edit User');
        $('#fm').form('load', row);
        url = 'update_user.php?id=' + row.id;
    }
}
function saveUser() {
    $('#fm').form('submit', {
        url: url,
        onSubmit: function () {
            return $(this).form('validate');
        },
        success: function (result) {
            var result = eval('(' + result + ')');
            if (result.errorMsg) {
                $.messager.show({
                    title: 'Error',
                    msg: result.errorMsg
                });
            } else {
                $('#dlg').dialog('close'); // close the dialog
                $('#dg').datagrid('reload'); // reload the user data
            }
        }
    });
}
function destroyUser() {
    var row = $('#dg').datagrid('getSelected');
    if (row) {
        $.messager.confirm('Confirm', 'Are you sure you want to destroy this user?', function (r) {
            if (r) {
                $.post('destroy_user.php', {id: row.id}, function (result) {
                    if (result.success) {
                        $('#dg').datagrid('reload'); // reload the user data
                    } else {
                        $.messager.show({ // show error message
                            title: 'Error',
                            msg: result.errorMsg
                        });
                    }
                }, 'json');
            }
        });
    }
}

var template = {
    fields: [
        {field: 'id', title: '用户ID', width: 60, align: 'center'},
        {field: 'name', title: '用户名称', width: 150, align: 'center'},
        {field: 'type', title: '电话号码', width: 150, align: 'center'},
        {field: 'desc', title: '描述', align: 'center'}
    ],
    views: ["from", "table"],

    views_table: {
        target: '#testTab',
        method: 'get',
        url: '/api/users',
        autoRowHeight: false,
        fitColumns: true,
        pagination: true,
        singleSelect: true,
        loadMsg: '努力加载中...',
        idFieldL: 'id',
        toolbar: [
            {
                iconCls: 'icon-add',
                handler: function () {
                    console.log("come on into creation process.");
                    $('#addPanel').dialog('open')
                }
            },
            {
                iconCls: 'icon-edit',
                handler: function () {
                    var pager =  $('#testTab').datagrid('getPager');
                    console.log(pager);
                }
            },
            '-',
            {
                iconCls: 'icon-remove',
                handler: function () {
                    alert('remove')
                }
            }
        ]
    },
    view_from: {
        url: '/api/user/$id',
        target: '#addForm',
        type: 'POST',
        dataType: 'json',
        clearForm: true,
        beforeSubmit: function (formData, jqForm, options) {
            return true;
        },
        success: function (data, statusText) {
            console.log("submit success.");
        }
    },
    validates: [

    ]
}
function tableLoaderSuccess(data) {
    console.log("--->");
    console.log(data);
}
function tableLoaderError(data) {
    console.error("--->");
    console.error(data);
}
$(document).ready(function () {
    var tableOptions = {};
    var fromOptions = {};

    $.extend(tableOptions, template.views_table, {columns: [template.fields]})
    $.extend(fromOptions, template.view_from, {columns: [template.fields]})

    $.extend($.fn.pagination.defaults, {afterPageText: '页 - 共{pages}页', beforePageText: '第', displayMsg: '显示从 {from} 到 {to} 页面总数 {total} 的记录', total: 20})

    var ddg = $('#testTab').datagrid(tableOptions);
    console.log(ddg);
    var el = $.element;
    $.each(template.fields, function (i, fieldData) {
        console.log(fieldData);
        el.div({ className: 'fitem' },
                el.label({  htmlFor: fieldData.field + '-input' },
                        fieldData.title + ' :'
                ),
                el.input({id: fieldData.field + '-input', name: fieldData.field, type: 'text', required: 'true'})

        ).appendTo($('#addForm'));

    });
    console.log($('#addForm').html());
    var form = $('#addForm').appendTo("#insertForm");

    //  $('#addForm').form(fromOptions);

    // $('#addForm').hide();
    $('#addPanel').dialog({
        title: 'My Dialog',
        width: 450,
        height: 250,
        closed: true,
        cache: false,
        resizable: true,
        modal: true,
        buttons: [
            {
                text: '保存',
                handler: function () {
                    $('#addForm').ajaxSubmit(fromOptions);
                    $('#addPanel').dialog('close'); // close the dialog
                    $('#testTab').datagrid('reload'); // reload the user data
                }
            },
            {
                text: '关闭',
                handler: function () {
                    $('#addPanel').dialog('close'); // close the dialog
                    $('#testTab').datagrid('reload'); // reload the user data
                }
            }
        ]
    });
    console.log(fromOptions);
    /*
     $('#p2').panel({
     width:500,
     height:150,
     title:'My Panel',
     tools:[{
     iconCls:'icon-add',
     handler:function(){alert('new')}
     },{
     iconCls:'icon-save',
     handler:function(){alert('save')}
     }]
     });

     */

    /*
     $('#addPanel').dialog({ title: 'My Dialog',
     width: 400,
     height: 200,
     closed: true,
     cache: false,
     href: '#',
     modal: true
     });
     */
})


</script>
<style type="text/css">
    #fm {
        margin: 0;
        padding: 10px 30px;
    }

    .ftitle {
        font-size: 14px;
        font-weight: bold;
        padding: 5px 0;
        margin-bottom: 10px;
        border-bottom: 1px solid #ccc;
    }

    .fitem {
        margin-bottom: 5px;
    }

    .fitem label {
        display: inline-block;
        width: 80px;
    }
</style>
</body>
</html>